
import React, { Component } from 'react';
import {
    StyleSheet,
    WebView,
    BackAndroid,
    Dimensions,
    View,
    Image,
    DeviceEventEmitter,
    TouchableOpacity,
    BackHandler
} from 'react-native';

import Loading from '../../common/Loading';
import NavigationBar from '../../common/NavigationBar';
import {setSpText,setHW} from '../../component/ScreenUtil';

var { width: screenWidth } = Dimensions.get('window');

let canGoBack = false;

export default class AdvView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            requestUrl: this.props.navigation.state.params.advURL,
            requestHtml: this.props.navigation.state.params.htmlStr
        };
        this.onNavigationStateChange = this.onNavigationStateChange.bind(this);
        this.goBack = this.goBack.bind(this);
    }

    componentDidMount() {
        DeviceEventEmitter.addListener('RefreshPricePage', () => {
            // global.log('requestUrl----------:' + this.state.requestUrl);
            this.setState({
                requestUrl: this.props.navigation.state.params.advURL,
            });
        });
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('RefreshPricePage', this.goBack);
    }


    onNavigationStateChange(navState) {
        canGoBack = navState.canGoBack;
    }

    goBack() {
        if (canGoBack) {
            this.webview.goBack();
            return true;
        }
        return this.props.navigation.goBack;
    }

    renderLoading() {
        return <Loading />;
    }

    render() {
        const { navigator, route } = this.props;
        const htmlViewJSON = this.state.requestUrl ? { uri: this.state.requestUrl } : { html: this.state.requestHtml};
        // global.log(this.state.requestHtml, 'this.state.requestHtml')
        // 设置图片宽度100%
        // 外部链接的图片问题 100%
        var handleSetImg = "javascript:(function(){" +
            "var objs = document.getElementsByClassName('wscnph'); " +
            "for(var i=0;i<objs.length;i++)  " +
            "{"
            + "var img = objs[i];   " +
            "    img.style.maxWidth = '100%'; img.style.height = 'auto';  " +
            "}" +
            "})()";
        // global.log(this.state.requestHtml,'htmlstr') 
        
         return (
            <View style={styles.container}>
                <NavigationBar
                    title={'详情'}
                    style={styles.navigatorBar}
                    leftButton={this.renderLeftButton(require('../../assets/imgs/back.png'))}
                />
                <WebView
                    ref={(ref) => { this.webview = ref; }}
                    automaticallyAdjustContentInsets={false}
                    style={{ flex: 1, width: screenWidth}}
                    // source={{ html: headerH4 }}
                    source={htmlViewJSON}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    startInLoadingState
                    scalesPageToFit
                    decelerationRate="normal"
                    onShouldStartLoadWithRequest={() => {
                        const shouldStartLoad = true;
                        return shouldStartLoad;
                    }}
                    injectedJavaScript={handleSetImg}
                    onNavigationStateChange={this.onNavigationStateChange}
                    renderLoading={this.renderLoading}
                />
            </View>
        );
    }
    // 渲染按钮
    // 渲染按钮 返回按钮
    renderLeftButton(image) {
        return <TouchableOpacity
            style={[global.CommonStyleSheet.NavLeftButton]}
            onPress={()=>{
                this.props.navigation.goBack();//pop就会返回上一个页面
            }}>
            <Image style={{ width: 34, height: 34 }} source={image}/>
        </TouchableOpacity>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    },
    spinner: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.65)'
    },
    spinnerContent: {
        justifyContent: 'center',
        width: Dimensions.get('window').width * (7 / 10),
        height: Dimensions.get('window').width * (7 / 10) * 0.68,
        backgroundColor: '#fcfcfc',
        padding: setHW(40),
        borderRadius: setHW(10)
    },
    spinnerTitle: {
        fontSize: setSpText(36),
        color: '#313131',
        textAlign: 'center',
        marginTop: setHW(10),
    },
    shareContent: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    shareIcon: {
        width: setHW(80),
        height: setHW(80)
    }
});